import React, { useState, memo } from 'react';
import { Row, Col, Select, Form, Modal, message, Input } from 'antd';
import styles from './index.less';
import { useUpdateEffect, useUnmount } from '@umijs/hooks';
import useAddModel from '../../useModels/useAddModel';
import useModel from '../../useModels/useModel';
const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
class Fields {
  suId = '';
  ip = '';
  port = '';
  fsuTypeId = undefined;
  ftpUsername = '';
  ftpPassword = '';
  vendor = '';
  username = '';
  password = '';
}
const CustomizedForm = ({ clear, form }) => {
  let fields = new Fields();

  const { deviceTypeList } = useAddModel(model => [model.deviceTypeList]);
  return (
    <Form initialValues={fields} form={form}>
      <Form.Item
        name="suId"
        {...layout}
        label="SUID"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="fsuTypeId"
        {...layout}
        label="设备类型"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Select placeholder={'请输入内容'}>
          {deviceTypeList.map((item, i) => {
            return (
              <Option key={i.toString(36) + i} value={item.id}>
                {item.name}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
      <Form.Item
        name="ip"
        {...layout}
        label="IP地址"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
          {
            pattern: /^((1\d\d|2[0-4]\d|25[0-5]|\d{1,2})\.){3}(1\d\d|2[0-4]\d|25[0-5]|\d{1,2})$/,
            message: '请填写正确的IP!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="port"
        {...layout}
        label="端口号"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
          {
            pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
            message: '请填写正确的端口!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="ftpUsername"
        {...layout}
        label="ftp用户"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="ftpPassword"
        {...layout}
        label="ftp密码"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="vendor"
        {...layout}
        label="厂商"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="username"
        {...layout}
        label="用户名"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
      <Form.Item
        name="password"
        {...layout}
        label="密码"
        rules={[
          {
            required: true,
            message: '必须填写内容!',
          },
        ]}
      >
        <Input placeholder={'请输入内容'} />
      </Form.Item>
    </Form>
  );
};
export default memo(() => {
  const { visible, setVisible, addDev, addLoading } = useAddModel(model => [
    model.visible,
    model.addLoading,
  ]);
  const { run } = useModel(() => []);
  const [form] = Form.useForm();

  const handleOk = async e => {
    try {
      const fields = await form.validateFields();
      const { result } = await addDev(fields);
      let row = {};
      if (localStorage.getItem('deviceType')) {
        row = JSON.parse(localStorage.getItem('deviceType'));
      }
      if (row.id) {
        result && run({ pageSize: 9999, currentPage: 1, fsuTypeId: row.id });
      }
      result && setVisible(false);
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };

  const handleCancel = e => {
    setVisible(false);
  };
  const clear = () => {};

  return (
    <Modal
      className={styles['modal-wrap']}
      title={'新增设备'}
      width={600}
      visible={visible}
      onOk={handleOk}
      okText={'确认'}
      onCancel={'取消'}
      confirmLoading={addLoading}
      destroyOnClose={true}
      onCancel={handleCancel}
    >
      <div className={styles['form-wrap']}>
        <CustomizedForm form={form} clear={clear} />
      </div>
    </Modal>
  );
});
